<template>
  <div class="p-2">
    <el-card shadow="never" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="88px"
      >
        <el-form-item label="轮播图名称" prop="title">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入轮播图名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="是否轮播" prop="show">
          <el-select v-model="queryParams.show" clearable placeholder="请选择">
            <el-option
              v-for="item in selectArr.commonType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="是否外联" prop="link">
          <el-select v-model="queryParams.link" clearable placeholder="请选择">
            <el-option
              v-for="item in selectArr.commonType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <div class="p-2">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb-1">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd()"
              v-hasPermi="['system:user:edit']"
            >
              新增轮播图
            </el-button>
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAddFromList()"
              v-hasPermi="['system:user:edit']"
            >
              添加轮播图
            </el-button>
          </el-col> -->
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleEditNews()"
              v-hasPermi="['system:user:edit']"
            >
              编辑
            </el-button>
          </el-col> -->
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete()"
              v-hasPermi="['system:user:remove']"
            >
              删除
            </el-button>
          </el-col>
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getSwiperList"
          ></right-toolbar>
        </el-row>
      </template>
      <el-table
        :data="swiperList"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="30" align="center" />
        <!-- <el-table-column label="分类标题" align="center" prop="articleType">
           <template #default="{ row }: { row: CourseCarouselVo }">
            <el-tag>
              {{ articleTypeMap.get(row.articleType) }}
            </el-tag>
          </template> 
        </el-table-column> -->
        <el-table-column label="轮播图标题" align="center" prop="title" />
        <!-- <el-table-column label="轮播图副标题" align="center" prop="title" /> -->
        <el-table-column label="创建者" align="center" prop="createBy" />
        <el-table-column label="封面" prop="status" align="center">
          <template #default="{ row }: { row: CourseCarouselVo }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.imageUrl"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="1"
              :preview-src-list="row.imageUrl"
              fit="scale-down"
            />
          </template>
        </el-table-column>

        <el-table-column label="链接" align="center" prop="content">
          <template #default="{ row }: { row: CourseCarouselVo }">
            <span v-if="row.link"> {{ row.linkUrl }} </span>
            <span v-else> 暂无链接 </span>
          </template>
        </el-table-column>
        <el-table-column label="轮播" prop="status" align="center">
          <template #default="{ row }: { row: CourseCarouselVo }">
            <el-tag
              :type="CommonStatusStyleTypeMap.get(row.show ?? '') ?? 'info'"
            >
              {{ isSwiperMap.get(row.show ?? false) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 
        <el-table-column label="状态" prop="status" align="center">
          <template #default="{ row }: { row: CourseCarouselVo }">
            <el-tag
              :type="CommonStatusStyleTypeMap.get(row.status ?? '') ?? 'info'"
            >
              {{ row.statusMsg }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-tooltip content="详情" placement="top" :enterable="false">
              <el-button
                link
                type="primary"
                icon="FolderOpened"
                @click="handleDetail(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="编辑" placement="top" :enterable="false">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleEditNews(scope.row)"
                v-hasPermi="['system:user:edit']"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" :enterable="false">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:user:remove']"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getSwiperList"
      />
    </el-card>

    <!-- 新增轮播图 -->
    <el-dialog
      v-model="dialogStatus.visible"
      :title="dialogStatus.title"
      width="70%"
      center
      append-to-body
      :show-close="true"
      @close="handleCloseDialog"
      :before-close="handleBeforeCloseDialog"
    >
      <el-form
        :model="dialogData"
        ref="dialogFormRef"
        :inline="true"
        label-width="100px"
        class="dialogForm"
        :rules="formRules"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="轮播图标题" prop="title">
              <el-input
                style="width: 200px"
                v-model="dialogData.title"
                :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="新闻副标题" prop="title">
              <el-input
                style="width: 200px"
                v-model="dialogData.title"
                :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item
              label="是否轮播"
              prop="show"
              :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
            >
              <el-select
                style="width: 200px"
                v-model="dialogData.show"
                :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                clearable
                placeholder="是否轮播"
              >
                <el-option
                  v-for="item in selectArr.commonType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="轮播图封面" prop="cover">
              <upload-school-article-cover
                v-if="dialogStatus.visible"
                @getCoverUrl="getCoverUrl"
                :cover-type="1"
                :organization-id="dialogStatus.organizationId"
                :is-linked="dialogStatus.isLinked"
                :linked-cover-url="dialogData.imageUrl"
                :crop-width="460"
                :crop-height="215"
                v-model="dialogStatus.isSelected"
                :is-operable="
                  dialogStatus.dialogMode === DialogModeEnum.EDIT ||
                  dialogStatus.dialogMode === DialogModeEnum.NEW
                "
              ></upload-school-article-cover>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="摘要" prop="remark">
              <div class="flex" style="flex: 1">
                <el-input
                  style="width: 400px"
                  v-model="dialogData.remark"
                  :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                  maxlength="256"
                  placeholder="请输入摘要"
                  rows="4"
                  type="textarea"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="文章类型">
              <el-radio-group
                :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                v-model="dialogData.link"
                size="ml-4"
              >
                <el-radio :label="true" size="large">外部链接</el-radio>
                <el-radio :label="false" size="large">内部新闻</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="!dialogData.link">
          <el-col :span="24">
            <el-form-item label="绑定新闻" style="width: 100%">
              <!-- <div style="border: 1px solid #ccc" v-loading="editorLoading">
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editorRef"
                  :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                  :defaultConfig="toolbarConfig"
                  mode="default"
                />
                <editor
                  style="height: 400px; overflow-y: hidden"
                  v-model="currentRichContent"
                  :defaultConfig="editorConfig"
                  mode="default"
                  @onCreated="handleCreated"
                />
              </div> -->
              <el-table :data="newsList" v-loading="loading">
                <!-- <el-table-column
                  type="selection"
                  width="30"
                  align="center"
                /> -->
                <!-- <el-table-column
                  label="分类标题"
                  align="center"
                  prop="articleType"
                >
                  <template #default="{ row }: { row: SchoolSiteArticleVo }">
                    <el-tag>
                      {{ articleTypeMap.get(row.articleType) }}
                    </el-tag>
                  </template>
                </el-table-column> -->
                <el-table-column label="文章标题" align="center" prop="title" />
                <el-table-column label="副标题" align="center" prop="title" />
                <el-table-column
                  label="创建者"
                  align="center"
                  prop="createBy"
                />
                <el-table-column label="封面" prop="status" align="center">
                  <template #default="{ row }: { row: SchoolSiteArticleVo }">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="row.cover"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :initial-index="1"
                      :preview-src-list="row.cover"
                      fit="scale-down"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                >
                  <template #default="scope">
                    <!-- <el-button
                      link
                      type="primary"
                      @click="handleDetail(scope.row)"
                      >详情</el-button
                    > -->
                    <el-button
                      v-if="currentSourceId === scope.row.id"
                      link
                      type="danger"
                      @click="handleCheck(scope.row)"
                      :disabled="
                        dialogStatus.dialogMode === DialogModeEnum.DETAIL
                      "
                      v-hasPermi="['system:user:edit']"
                      >取消绑定</el-button
                    >

                    <el-button
                      v-else
                      link
                      type="primary"
                      :disabled="
                        dialogStatus.dialogMode === DialogModeEnum.DETAIL
                      "
                      @click="handleCheck(scope.row)"
                      v-hasPermi="['system:user:edit']"
                      >绑定</el-button
                    >
                    <!-- <el-button
                      link
                      type="primary"
                      @click="handleDelete(scope.row)"
                      v-hasPermi="['system:user:remove']"
                    ></el-button> -->
                  </template>
                </el-table-column>

                <!-- <el-table-column label="链接" align="center" prop="content">
                  <template #default="{ row }: { row: SchoolSiteArticleVo }">
                    <span v-if="row.contentType === '1'">
                      {{ row.content }}
                    </span>
                    <span v-else> 暂无链接 </span>
                  </template>
                </el-table-column>
                <el-table-column label="轮播" prop="status" align="center">
                  <template #default="{ row }: { row: SchoolSiteArticleVo }">
                    <el-tag
                      :type="
                        CommonStatusStyleTypeMap.get(row.isTop ?? '') ?? 'info'
                      "
                    >
                      {{ isSwiperMap.get(row.isTop ?? "") }}
                    </el-tag>
                  </template>
                </el-table-column> -->

                <!-- <el-table-column label="状态" prop="status" align="center">
                  <template #default="{ row }: { row: SchoolSiteArticleVo }">
                    <el-tag
                      :type="
                        CommonStatusStyleTypeMap.get(row.status ?? '') ?? 'info'
                      "
                    >
                      {{ row.statusMsg }}
                    </el-tag>
                  </template>
                </el-table-column> -->
              </el-table>
              <pagination
                v-show="newsTotal > 0"
                :total="newsTotal"
                v-model:page="getNewsParams.pageNum"
                v-model:limit="getNewsParams.pageSize"
                @pagination="getNewsList"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-else>
          <el-col :span="24">
            <el-form-item label="链接" prop="currentLinkContent">
              <el-input
                v-model="currentLinkContent"
                :disabled="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                placeholder="请输入外部链接"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <el-button type="primary" icon="Check" @click="dialogSubmit">
          提交
        </el-button>
        <el-button icon="Close" @click="dialogStatus.visible = false"
          >关闭</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  getSwiperList as getSwiperListApi,
  getNewsList as getNewsListApi,
  addSwiper as addSwiperApi,
  updateSwiper as updateSwiperApi,
  deleteSwiper as deleteSwiperApi,
} from "@/service/api/system/swiper";
import { CourseCarouselVo } from "@/service/api/system/swiper/types";
import to from "await-to-js";
import {
  CommonStatusMap,
  CommonStatusStyleTypeMap,
  articleTypeMap,
  isSwiperMap,
} from "@/maps/commonMaps.ts";
import { DialogModeEnum } from "@/enums/dialogEnum";
import { IToolbarConfig } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 获取轮播图列表BO
const initQueryParams = {
  id: "",
  status: "",
  title: "",
  sendTime: "",
  content: "",
  cover: "",
  introduction: "",
  // isTop: false,
  siteType: "",
  articleType: "",
  url: "",
  // isRich: false,
  timeRange: [null, null],
  // 是否外联
  link: false,
  // 外联链接
  linkUrl: "",
  // 外联图片
  imageUrl: "",
  // 是否展示
  show: true,
  // 展示时间
  timing: "",
  pageSize: 10,
  pageNum: 1,
  orderByColumn: "createTime",
  orderType: "desc",
};

const initDialogStatus = {
  dialogMode: DialogModeEnum.DETAIL,
  isDisabled: false,
  preview: false,
  visible: false,
  articleTable: false,
  title: "",
  isLinked: false,
  articleTableTitle: "",
  cover: "",
  isSelected: false,
  organizationId: "",
};
const initDialogData = {
  id: "",
  status: "",
  title: "",
  sendTime: "",
  content: "",
  cover: "",
  remark: "",
  // isTop: false,
  siteType: "",
  articleType: "",
  url: "",
  // isRich: false,
  timeRange: [null, null],
  // 是否外联
  link: false,
  // 外联链接
  linkUrl: "",
  // 外联图片
  imageUrl: "",
  // 是否展示
  show: false,
  // 展示时间
  timing: "",
  sourceId: "",
};
// 获取文章列表BO
const initGetNewsParams = {
  id: "",
  status: "",
  pageSize: 5,
  pageNum: 1,
  title: "",
  sendTime: "",
  content: "",
  introduction: "",
  url: "",
  timeRange: [null, null],
  orderByColumn: "createTime",
  orderType: "desc",
  organizationId: "",
};
const data = reactive({
  queryParams: { ...initQueryParams },
  dialogStatus: { ...initDialogStatus },
  dialogData: { ...initDialogData },
  getNewsParams: { ...initGetNewsParams },
});
const { queryParams, dialogStatus, dialogData, getNewsParams } = toRefs(data);

const total = ref(0);
const showSearch = ref(true);
const swiperList = ref<CourseCarouselVo[]>([]);
const single = ref(true);
const multiple = ref(true);
const loading = ref(false);
const editorLoading = ref<boolean>(false);
// 富文本编辑器工具栏配置
const toolbarConfig: IToolbarConfig = {
  excludeKeys: ["group-video", "fullScreen"],
};

// 配置editor
const editorConfig = {
  placeholder: "请输入新闻内容...",
  MENU_CONF: {
    uploadImage: {
      customUpload: {},
    },
  },
};
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const handleCreated = (editor: any) => {
  editorRef.value = editor;
  console.log("created", editor);
};
// 当前link链接
const currentLinkContent = ref();

const selectArr = {
  commonType: [
    {
      label: "是",
      value: true,
    },
    {
      label: "否",
      value: false,
    },
  ],
};

/**
 * 表单校验规则
 */
const formRules = {
  title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
  // articleType: [
  //   { required: true, message: "新闻类型不能为空", trigger: "blur" },
  // ],
  // isTop: [{ required: true, message: "是否轮播不能为空", trigger: "blur" }],
  remark: [{ required: true, message: "摘要不能为空", trigger: "blur" }],
  // content: [{ required: true, message: "新闻内容不能为空", trigger: "blur" }],
};
// 获取轮播图列表
const getSwiperList = async () => {
  const [err, res] = await to(getSwiperListApi(queryParams.value));
  if (!err) {
    console.log(res);
    swiperList.value = res.rows;
    total.value = Number(res.total);
  }
};
const newsList = ref([]);
const newsTotal = ref(0);
// 获取文章列表
const getNewsList = async () => {
  const [err, res] = await to(getNewsListApi(getNewsParams.value));
  if (!err) {
    console.log(res);
    newsList.value = res.rows;
    newsTotal.value = Number(res.total);
  }
};

// 文章选择
// const handleSelectionChange = () => {
//   ids.value = selection.map((item: any) => item.id);
//   single.value = selection.length != 1;
//   multiple.value = !selection.length;
//   console.log(ids.value);
// };

const currentSourceId = ref("");
// 选择
const handleCheck = (row: any) => {
  if (currentSourceId.value === row.id) {
    currentSourceId.value = "";
    // ElMessage({
    //   type: "info",
    //   message: "取消成功",
    // });
  } else {
    currentSourceId.value = row.id;
    // ElMessage({
    //   type: "success",
    //   message: "绑定成功",
    // });
  }
};
const ids = ref();
const handleSelectionChange = (selection: any) => {
  ids.value = selection.map((item: any) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  console.log(ids.value);
};

const queryRef = ref(ElForm);

/**
 * 重置
 */
const resetQuery = () => {
  queryRef.value.resetFields();
  getSwiperList();
};

// 查询按钮
const handleQuery = () => {
  getSwiperList();
};

// 新增轮播图按钮
const handleAdd = async () => {
  dialogStatus.value.dialogMode = DialogModeEnum.NEW;
  dialogStatus.value.title = "新增轮播图";
  dialogStatus.value.visible = true;
  // editorRef.value && editorRef.value.enable();
  await getNewsList();
};

// 轮播图详情按钮
const handleDetail = async (row: any) => {
  console.log(row);
  dialogData.value = row;
  dialogStatus.value.visible = true;
  if (row.link) {
    currentLinkContent.value = row.linkUrl;
  } else {
    currentSourceId.value = row.sourceId;
  }
  if (row.imageUrl && row.imageUrl != "") {
    dialogStatus.value.isLinked = true;
  }
  dialogStatus.value.dialogMode = DialogModeEnum.DETAIL;
  if (row.sourceId) {
    getNewsParams.value.id = row.sourceId;
    await getNewsList();
  }
};

// 修改轮播图按钮
const handleEditNews = async (row: any) => {
  dialogData.value = row;
  dialogStatus.value.visible = true;
  if (row.link) {
    currentLinkContent.value = row.linkUrl;
  } else {
    currentSourceId.value = row.sourceId;
  }
  if (row.imageUrl && row.imageUrl != "") {
    dialogStatus.value.isLinked = true;
  }
  dialogStatus.value.dialogMode = DialogModeEnum.EDIT;
  await getNewsList();
};
// 获取上传后的url
const getCoverUrl = (url: string) => {
  dialogData.value.imageUrl = url;
  console.log(dialogData.value.imageUrl);
};

// 删除
const handleDelete = async (row?: any) => {
  if (row) {
    const [err] = await to(deleteSwiperApi(row.id));
    if (!err) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      await getSwiperList();
    } else {
      ElMessage({
        type: "error",
        message: "删除失败",
      });
      await getSwiperList();
    }
  } else {
    const [err] = await to(deleteSwiperApi(ids.value));
    if (!err) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      await getSwiperList();
    } else {
      ElMessage({
        type: "error",
        message: "删除失败",
      });
      await getSwiperList();
    }
  }
};
const dialogFormRef = ref(ElForm);
// dialog提交
const dialogSubmit = () => {
  console.log(dialogData.value);
  dialogFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      // 验证通过
      console.log(dialogData.value);
      if (dialogData.value.link) {
        dialogData.value.linkUrl = currentLinkContent.value;
      } else {
        dialogData.value.sourceId = currentSourceId.value;
      }
      if (dialogData.value.id) {
        // 有id为编辑
        if (dialogStatus.value.isSelected) {
          const [err, confirm] = await to<string, string>(
            ElMessageBox.confirm(
              "你有图片未上传，将保存原有图片，是否确定提交?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              },
            ),
          );
          if (err === "cancel") {
            ElMessage({
              type: "info",
              message: "已取消提交",
            });
          } else if (confirm === "confirm") {
            ElMessage({
              type: "info",
              message: "强制提交",
            });
            const [err] = await to(updateSwiperApi(dialogData.value));
            if (!err) {
              ElMessage({
                type: "success",
                message: "修改成功",
              });
              await getSwiperList();
              dialogStatus.value.visible = false;
            } else {
              ElMessage({
                type: "error",
                message: "修改失败",
              });
              await getSwiperList();
              dialogStatus.value.visible = false;
            }
          }
        } else {
          const [err] = await to(updateSwiperApi(dialogData.value));
          if (!err) {
            ElMessage({
              type: "success",
              message: "新增成功",
            });
            await getSwiperList();
            dialogStatus.value.visible = false;
          } else {
            ElMessage({
              type: "error",
              message: "新增失败",
            });
            await getSwiperList();
            dialogStatus.value.visible = false;
          }
        }
      } else {
        // 无id为新增
        if (dialogStatus.value.isSelected) {
          // 询问是否关闭
          const [err, confirm] = await to<string, string>(
            ElMessageBox.confirm("你有图片未上传，是否确定提交?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }),
          );
          if (err === "cancel") {
            ElMessage({
              type: "info",
              message: "已取消提交",
            });
          } else if (confirm === "confirm") {
            ElMessage({
              type: "info",
              message: "强制提交",
            });
            const [err, res] = await to(addSwiperApi(dialogData.value));
            if (!err) {
              console.log(res);
              ElMessage({
                type: "success",
                message: "新增成功",
              });
              await getSwiperList();
              dialogStatus.value.visible = false;
            } else {
              await getSwiperList();
              ElMessage({
                type: "error",
                message: "新增失败",
              });
            }
          }
        } else {
          const [err, res] = await to(addSwiperApi(dialogData.value));
          if (!err) {
            console.log(res);
            ElMessage({
              type: "success",
              message: "新增成功",
            });
            await getSwiperList();
            dialogStatus.value.visible = false;
          } else {
            await getSwiperList();
            ElMessage({
              type: "error",
              message: "新增失败",
            });
          }
        }
      }
    }
  });
};

// 关闭新增dialog
const handleCloseDialog = () => {
  currentSourceId.value = "";
  dialogStatus.value.isSelected = false;
  dialogData.value = Object.assign({}, initDialogData);
  getNewsParams.value = Object.assign({}, initGetNewsParams);
};

// 关闭前的回调
const handleBeforeCloseDialog = async (done: any) => {
  console.log(dialogStatus.value.isSelected);
  if (dialogStatus.value.isSelected) {
    // 询问是否关闭
    const [err, confirm] = await to<string, string>(
      ElMessageBox.confirm("你有图片未上传，是否确定关闭对话框?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }),
    );
    if (err === "cancel") {
      ElMessage({
        type: "info",
        message: "已取消关闭",
      });
    } else if (confirm === "confirm") {
      ElMessage({
        type: "info",
        message: "强制关闭对话框",
      });
      done();
    }
  } else {
    done();
  }
};

onMounted(() => {
  getSwiperList();
});
</script>
